<template>
  <div class="dashboard-container">
    <div class="dashboard-header">
      <h1>仪表盘</h1>
      <p>欢迎使用后台管理系统</p>
    </div>

    <!-- 统计卡片 -->
    <a-row :gutter="[16, 16]" class="stats-cards">
      <a-col :xs="24" :sm="12" :md="8">
        <a-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon admin-icon">
              <UserOutlined />
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalManagers }}</div>
              <div class="stat-label">管理员总数</div>
            </div>
          </div>
        </a-card>
      </a-col>
      
      <a-col :xs="24" :sm="12" :md="8">
        <a-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon active-icon">
              <CheckCircleOutlined />
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.activeManagers }}</div>
              <div class="stat-label">活跃管理员</div>
            </div>
          </div>
        </a-card>
      </a-col>
      
      <a-col :xs="24" :sm="12" :md="8">
        <a-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon system-icon">
              <SettingOutlined />
            </div>
            <div class="stat-info">
              <div class="stat-number">正常</div>
              <div class="stat-label">系统状态</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- 快捷操作 -->
    <a-card title="快捷操作" class="quick-actions">
      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :sm="12" :md="6">
          <a-button 
            type="primary" 
            size="large" 
            block 
            @click="$router.push('/managers')"
          >
            <UserAddOutlined />
            管理员管理
          </a-button>
        </a-col>
        
        <a-col :xs="24" :sm="12" :md="6">
          <a-button 
            size="large" 
            block 
            @click="$router.push('/videos')"
          >
            <UserAddOutlined />
            视频管理
          </a-button>
        </a-col>
        
        <a-col :xs="24" :sm="12" :md="6">
          <a-button 
            size="large" 
            block 
            @click="$router.push('/articles')"
          >
            <UserAddOutlined />
            文章管理
          </a-button>
        </a-col>
        
        <a-col :xs="24" :sm="12" :md="6">
          <a-button 
            size="large" 
            block 
            @click="$router.push('/profile')"
          >
            <SettingOutlined />
            个人设置
          </a-button>
        </a-col>
      </a-row>
    </a-card>

    <!-- 系统信息 -->
    <a-card title="系统信息" class="system-info">
      <a-descriptions :column="2" bordered>
        <a-descriptions-item label="系统版本">v1.0.0</a-descriptions-item>
        <a-descriptions-item label="运行时间">{{ systemInfo.uptime }}</a-descriptions-item>
        <a-descriptions-item label="当前用户">{{ currentUser.email }}</a-descriptions-item>
        <a-descriptions-item label="用户类型">{{ getUserTypeText(currentUser.type) }}</a-descriptions-item>
        <a-descriptions-item label="最后登录">{{ formatTime(new Date()) }}</a-descriptions-item>
        <a-descriptions-item label="登录IP">{{ systemInfo.loginIP }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { managerApi } from '@/api'
import {
  UserOutlined,
  CheckCircleOutlined,
  SettingOutlined,
  UserAddOutlined
} from '@ant-design/icons-vue'

export default defineComponent({
  name: 'DashboardView',
  components: {
    UserOutlined,
    CheckCircleOutlined,
    SettingOutlined,
    UserAddOutlined
  },
  setup() {
    const loading = ref(false)
    
    const stats = reactive({
      totalManagers: 0,
      activeManagers: 0
    })
    
    const systemInfo = reactive({
      uptime: '1天2小时',
      loginIP: '127.0.0.1'
    })
    
    const currentUser = reactive({
      email: '',
      type: 1
    })
    
    // 获取当前用户信息
    const getCurrentUser = () => {
      const userStr = localStorage.getItem('admin_user')
      if (userStr) {
        const user = JSON.parse(userStr)
        currentUser.email = user.email
        currentUser.type = user.type
      }
    }
    
    // 获取统计数据
    const getStats = async () => {
      try {
        const result = await managerApi.list({ page: 1, pagesize: 100 })
        if (result.success) {
          const managers = result.data.data
          stats.totalManagers = managers.length
          stats.activeManagers = managers.filter(m => m.is_enable).length
        }
      } catch (error) {
        console.error('获取统计数据失败:', error)
      }
    }
    
    // 刷新数据
    const refreshData = async () => {
      loading.value = true
      try {
        await getStats()
        message.success('数据刷新成功')
      } catch (error) {
        message.error('数据刷新失败')
      } finally {
        loading.value = false
      }
    }
    
    // 获取用户类型文本
    const getUserTypeText = (type) => {
      const typeMap = {
        1: '超级管理员',
        2: '普通管理员',
        3: '编辑员',
        4: '查看员'
      }
      return typeMap[type] || '未知'
    }
    
    // 格式化时间
    const formatTime = (date) => {
      return date.toLocaleString('zh-CN')
    }
    
    onMounted(() => {
      getCurrentUser()
      getStats()
    })
    
    return {
      loading,
      stats,
      systemInfo,
      currentUser,
      refreshData,
      getUserTypeText,
      formatTime
    }
  }
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.dashboard-header {
  margin-bottom: 20px;
}

.dashboard-header h1 {
  margin: 0 0 8px 0;
  font-size: 22px;
  font-weight: 600;
  color: #000;
}

.dashboard-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.stats-cards {
  margin-bottom: 20px;
}

.stat-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 12px 0;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 20px;
  color: white;
}

.admin-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.active-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.login-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.system-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #000;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.quick-actions {
  margin-bottom: 20px;
}

.quick-actions .ant-btn {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.system-info {
  margin-bottom: 20px;
}
</style>